<template>
  <div class="dashboard-container">
    <!-- 待办事项区域 -->
    <div class="todo-section">
      <h2>待办事项</h2>
      <div class="todo-flex">
        <div class="todo-group blue">
          <h3>待审批</h3>
          <div class="todo-item">版本升级 <span>2</span></div>
          <div class="todo-item">空间清理 <span>0</span></div>
          <div class="todo-item">设备点检 <span>1</span></div>
          <div class="todo-item">设备巡检 <span>1</span></div>
        </div>
        <div class="todo-group blue">
          <div class="todo-item">设备维修 <span>0</span></div>
          <div class="todo-item">易损件更换 <span>1</span></div>
          <div class="todo-item">培训指导 <span>0</span></div>
        </div>
        <div class="todo-group orange">
          <h3>待处理</h3>
          <div class="todo-item">设备点检 <span>2</span></div>
          <div class="todo-item">设备巡检 <span>2</span></div>
          <div class="todo-item">设备维修 <span>2</span></div>
          <div class="todo-item">易损件更换 <span>2</span></div>
        </div>
      </div>
    </div>

    <!-- 保养任务区域 -->
    <div class="task-section">
      <div class="task-header">
        <h2>保养任务</h2>
        <div class="task-tabs">
          <button :class="{ active: tab === '日' }" @click="tab = '日'">日</button>
          <button :class="{ active: tab === '周' }" @click="tab = '周'">周</button>
          <button :class="{ active: tab === '月' }" @click="tab = '月'">月</button>
        </div>
      </div>
      <div class="task-flex">
        <!-- 环形图 -->
        <div class="chart-circle" id="circleChart" style="width: 200px; height: 200px;"></div>
        <!-- 数据列表 -->
        <div class="task-data">
          <div class="data-item">
            <span>待保养</span>
            <span>136</span>
            <span>49.3%</span>
          </div>
          <div class="data-item">
            <span>已保养</span>
            <span>88</span>
            <span>31.9%</span>
          </div>
          <div class="data-item">
            <span>已过期</span>
            <span>52</span>
            <span>18.8%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 保养数据区域 -->
    <div class="data-section">
      <h2>保养数据</h2>
      <div class="data-grid">
        <div class="data-item">
          <p>今日完成保养数</p>
          <span>2</span>
        </div>
        <div class="data-item">
          <p>本月完成保养数</p>
          <span>260</span>
        </div>
        <div class="data-item">
          <p>本月设备点检次数</p>
          <span>2</span>
        </div>
        <div class="data-item">
          <p>本月设备巡检数</p>
          <span>260</span>
        </div>
        <div class="data-item">
          <p>本月维修设备数</p>
          <span>10台</span>
        </div>
        <div class="data-item">
          <p>本月易损件更换设备数</p>
          <span>6台</span>
        </div>
        <div class="data-item">
          <p>本月培训指导次数</p>
          <span>0</span>
        </div>
      </div>
    </div>

    <!-- 设备保养次数排行 -->
    <div class="rank-section">
      <h2>设备保养次数排行</h2>
      <div id="rankChart" style="width: 100%; height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

// 响应式数据
const tab = ref('日');

// 模拟图表数据（实际从接口获取）
const circleData = [
  { value: 136, name: '待保养', itemStyle: { color: '#1890ff' } },
  { value: 88, name: '已保养', itemStyle: { color: '#52c41a' } },
  { value: 52, name: '已过期', itemStyle: { color: '#f5222d' } }
];
const rankData = [
  { name: '设备监控', value: 94 },
  { name: '月度保养', value: 79 },
  { name: '设备巡检', value: 60 },
  { name: '设备维修', value: 45 },
  { name: '易损件更换', value: 40 },
  { name: '版本升级', value: 21 },
  { name: '空间清理', value: 18 },
  { name: '年度保养', value: 15 },
  { name: '培训指导', value: 11 },
  { name: '远程助手', value: 8 }
];

let circleChart = null;
let rankChart = null;

onMounted(() => {
  initCircleChart();
  initRankChart();
});

// 初始化环形图
function initCircleChart() {
  circleChart = echarts.init(document.getElementById('circleChart'));
  const option = {
    title: { text: '276个总数', left: 'center', top: '40%', textStyle: { fontSize: 16 } },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        data: circleData,
        label: { show: false },
        labelLine: { show: false }
      }
    ]
  };
  circleChart.setOption(option);
}

// 初始化排行条形图
function initRankChart() {
  rankChart = echarts.init(document.getElementById('rankChart'));
  const option = {
    xAxis: { type: 'value', name: '单位：件' },
    yAxis: {
      type: 'category',
      data: rankData.map(item => item.name),
      inverse: true
    },
    series: [
      {
        type: 'bar',
        data: rankData.map(item => item.value),
        itemStyle: { color: '#409EFF' },
        barWidth: '60%'
      }
    ]
  };
  rankChart.setOption(option);
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.todo-section, .task-section, .data-section, .rank-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}
.todo-flex, .task-flex, .data-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.todo-group {
  flex: 1;
  padding: 15px;
  border-radius: 4px;
}
.blue { background: #e6f3ff; }
.orange { background: #fff2cc; }
.todo-item { margin-bottom: 10px; }
.todo-item span { float: right; font-weight: bold; }

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.task-tabs button {
  margin-left: 10px;
  padding: 6px 12px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.task-tabs button.active {
  background: #409EFF;
  color: #fff;
  border-color: #409EFF;
}
.task-data .data-item {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.data-grid .data-item {
  flex: 1 1 200px;
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  text-align: center;
}
.data-grid p { margin: 0 0 10px; }

/* 适配大屏可调整响应式，这里简单示例 */
@media (min-width: 1200px) {
  .dashboard-container {
    grid-template-columns: 2fr 1fr;
  }
  .task-section {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }
}
</style>